﻿<!DOCTYPE html>
<!--办公安全分委会积分考核-->
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta month="viewport" content="width=device-width, initial-scale=1">
        <script src="/static/js/common.js"></script>

</head>

<body>
    <div id="app" v-cloak class="popupW50">
        <el-form label-position="right" :model="Form" status-icon :rules="rules" ref="ruleForm" label-width="100px"
            size="mini">
            <el-row>
                <el-col :span="11">
                    <el-col>
                        <div class="elst-select-mini">
                            <el-form-item>
                                <el-input size="mini">
                                    <template slot="prepend">
                                        <div> {{ScoreAssessmentOfficeSecurity.itemType+mark.m}}</div>
                                    </template>
                                    <el-select @visible-change="visibleChange" @input="getScope" v-model="Form.itemType" slot="suffix"
                                        :placeholder="ScoreAssessmentOfficeSecurity.itemType">
                                        <el-option label="请选择" value=""></el-option>
                                        <el-option v-for="item in itemType" :label="item.itemType" :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-input>
                                <span class="iputLineMust" v-if="Form.itemType.length<=0">
                                    <!-- 必填项添加 -->
                                    <img src="/static/images/exclamation.png" alt="">
                                </span>

                            </el-form-item>
                        </div>
                    </el-col>
                </el-col>
                <el-col :span="11" :offset="2">
                    <div class="elst-select-mini">
                        <el-form-item>
                            <el-input size="mini">
                                <template slot="prepend">
                                    {{ScoreAssessmentOfficeSecurity.time+mark.m}}
                                </template>
                                <el-date-picker slot="suffix" v-model="Form.month" type="date" size="mini"
                                    format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择时间">
                                </el-date-picker>
                            </el-input>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="11">
                    <div class="elst-select-mini">
                        <!-- <el-form-item>
                            <el-input type="text" v-model="Form.scope" autocomplete="off" size="mini">
                                <template slot="prepend">
                                    {{ScoreAssessmentOfficeSecurity.scope+mark.m}}
                                </template>
                            </el-input>
                        </el-form-item> -->
                        <p class="main-label">{{ScoreAssessmentOfficeSecurity.scope+mark.m}}</p>
                        <p class="lh35 ">{{Form.scope}}</p>
                    </div>
                </el-col>
            </el-row>
            <el-row type="flex" justify="end">
                <el-form-item>
                    <el-button type="primary" @click="onSubmitForm('ruleForm')">{{col.btnSave}}</el-button>
                    <!--<el-button type="primary" @click="onSubmitForm('ruleForm')">{{col.btnCommit}}</el-button>-->
                    <el-button type="primary" @click="parent.ListItem.dialogVisible=false">{{col.btnBack}}</el-button>
                </el-form-item>
            </el-row>
        </el-form>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                ListItem1: {
                    //tableDate: {
                    tablebox1: [],
                    tablebox2: [],
                    tablebox3: [],
                    //},
                },
                id: '',
                type: '',
                month: [],
                year: [],
                itemType: [],
                //业务表单内容
                Form: {
                    id: '',
                    month: "",
                    year: "",
                    itemType: "",
                    scope: "0",

                },
                IsConsumables: [],
                //表单验证
                rules: {
                    Personnelmonth: [
                        verification.NotNull,
                        { pattern: verification.StringLengthAtoB.t.format(2, 5), message: verification.StringLengthAtoB.m.format(2, 5), trigger: 'blur' }
                    ],
                    Contractormonth: [
                        verification.NotNull,
                        { pattern: verification.StringLengthAtoB.t.format(5, 50), message: verification.StringLengthAtoB.m.format(5, 10), trigger: 'blur' }
                    ],
                }
            },
            methods: {
                //解決edge下select bug
                visibleChange: function (isVisible) {
                    visibleChange(isVisible)
                },
                getScope: function () {
                 
                    if (this.Form.itemType == null) {
                        this.Form.scope = 0;
                    } else {
                        //this.Form.scope = Mock.mock({
                        //    "number|1-5": 5
                        //}).number;
                    //    this.Form.scope = 3;
                        var currObj = this;
                        myAjax("post", this, '/api/ZB_ProjectTypes/getScope', currObj.Form,
                            function (response) {
                                currObj.ListItem1.tablebox1 = [];
                                currObj.ListItem1.tablebox1 = response.data;
                                currObj.Form.scope = currObj.ListItem1.tablebox1.scope;
                            });
                    }
                },
                handleChange: function (value) {
                    console.log(value);
                },
                //提交数据
                onSubmitForm: function (formmonth) {
                    var mythis = this;
                    this.$refs[formmonth].validate(function (valid) {
                        //验证通过
                        if (valid) {
                            onSubmitForm(this, '/api/ZB_OfficeSafety/Save', mythis.Form);
                        } else {
                            //验证失败
                            return false;
                        }
                    });
                },
                getData: function () {
                    getData(this, '/api/ZB_OfficeSafety/get?id=' + this.id);
                    //this.Form.month = this.Form.month + "";
                    //this.Form.year = this.Form.year + "";
                    //this.Form.itemType = this.Form.itemType + "";
                },

                //总部_项目类型
                GetItemType: function () {
                    var mythis = this;
                    //myAjax("post", this, '/api/ZB_SafetyFrameWork/GetList', { model: { Name: '', pid: '' }, }, function (response) {
                    //    mythis.dafetyFrameWork = menuHelperX(response.data.pageData, guidEmpty)
                    //}, false);

                    var mythis = this;
                    myAjax("post", mythis, '/api/ZB_ProjectTypes/GetList', { model: {}, offset: 0, limit: 100 }, function (response) {
                        console.log(response);
                        //response.data.forEach(function (v) {
                        //    v.label = v.name;
                        //})
                        mythis.itemType = response.data;
                      //  mythis.itemType = MenuHelper(response.data, guidEmpty);
                        console.log('AA', mythis.dafetyFrameWork)
                        //   mythis.Form.OrganizationalStructureMaintenance = response.data;
                    });
                },

            },
            mounted: function () {
                //this.month = getDicData('61');
                //this.year = getDicData('w1');
                //this.itemType = getDicData('n77');
                //this.IsConsumables = getDicData('50');
                this.GetItemType();
                this.id = getUrlParam("id");
                this.type = getUrlParam("type");
                if (this.type != 'tj') {
                    this.getData();
                } else {
                    this.Form.id = this.id;
                }
               
            }
        });
    </script>
</body>

</html>